<template>
  <div class="conetr" :loading="loading">
    <div class="center-board">
      <div class="center-title">
        <h3>代金券申请</h3>
      </div>
      <div class="action-bar mb-[20px]">
        <el-button icon="Back" type="primary" plain text @click="backTo">返回</el-button>
      </div>
    </div>
    <div class="center-form">
      <el-form ref="formRef" label-width="100px" :inline="true">
        <el-form-item label="编码" prop="name">{{ infos?.code }}</el-form-item>
        <el-form-item label="类型" prop="name">{{ types[infos?.type] }}</el-form-item>
        <el-form-item label="名称" prop="name">{{ infos?.title }}</el-form-item>
        <el-form-item label="券额" prop="name">{{ infos?.amount }}</el-form-item>
        <el-form-item label="数量" prop="name">{{ infos?.totalStorage }}</el-form-item>
        <!-- <el-form-item label="预算范围" prop="name">A</el-form-item> -->
        <el-form-item label="兑换时间" prop="name">
          {{ infos?.claimStartTime }} - {{ infos?.claimEndTime }}
        </el-form-item>
        <el-form-item label="可用时间" prop="name">
          {{ infos?.effectiveStartTime }} - {{ infos?.effectiveEndTime }}
        </el-form-item>
      </el-form>
      <el-form ref="selectFrom" :model="detailsForm" label-width="100px" :inline="true">
        <el-form-item label="券码">
          <el-input v-model="detailsForm.code" placeholder="券码" clearable />
        </el-form-item>
        <!-- <el-form-item label="类型">
          <el-select v-model="detailsForm.keywords" placeholder="请选择" style="width: 200px">
            <el-option label="到店礼" :value="1" />
            <el-option label="补贴券" :value="2" />
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="名称">
          <el-input v-model="detailsForm.keywords" placeholder="请输入券名称" clearable />
        </el-form-item> -->
        <el-form-item label="兑换人员">
          <el-input v-model="detailsForm.keywords" placeholder="请输入业主名称" clearable />
        </el-form-item>
        <el-form-item label="兑换时间" prop="operationStartTime">
          <el-date-picker
            v-model="detailsForm.operationStartTime"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="detailsForm.status"
            placeholder="请选择"
            style="width: 200px"
            clearable
          >
            <el-option label="已兑换" :value="1" />
            <el-option label="待确认" :value="2" />
            <el-option label="已确认" :value="3" />
            <el-option label="已过期" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">
            <template #icon>
              <Search />
            </template>
            搜索
          </el-button>
          <el-button @click="handleResetQuery">
            <template #icon>
              <Refresh />
            </template>
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <BasePageTable
        :table-data="tableData"
        :table-columns-data="tableColumnsData"
        :total="total"
        :loading="loading"
        :page-num="detailsForm.pageNum"
        :page-size="detailsForm.pageSize"
        @handleQuery="changePage"
      >
        <template #index="scope">{{ scope.index + 1 }}</template>
        <template #claimStartTime="{ row }">
          {{ row.claimStartTime }} - {{ row.claimEndTime }}
        </template>
        <template #status="{ row }">
          {{ form_status[row.status] }}
        </template>
        <template #operation="row">
          <el-button>查看</el-button>
        </template>
      </BasePageTable>
    </div>
  </div>
</template>
<script setup lang="ts">
import couponApi from "@/api/coupon/coupon";

const emit = defineEmits(["backTo"]);
const props = defineProps({
  infos: {
    type: Object,
    default: {},
  },
});
const detailsForm = ref({
  code: "",
  operationStartTime: undefined,
  keywords: "",
  pageNum: 1,
  pageSize: 10,
  storageId: undefined,
  status: undefined,
  merchantId: undefined,
});
const types = ref({
  1: "到店礼",
  2: "补贴券",
});
const form_status = ref({
  1: "已兑换",
  2: "待确认",
  3: "已确认",
  4: "已过期",
});
const tableData = ref([]);
const total = ref(0);
const tableColumnsData = ref([
  {
    prop: "index",
    label: "序号",
    showOverflowTooltip: true,
    customSlot: "index",
  },
  {
    prop: "couponCode",
    label: "编码",
    showOverflowTooltip: true,
  },
  {
    prop: "neighborhood",
    label: "房屋信息",
    showOverflowTooltip: true,
  },
  {
    prop: "ownName",
    label: "兑换人员",
    showOverflowTooltip: true,
  },
  // {
  //   prop: "index",
  //   label: "需求类型",
  //   showOverflowTooltip: true,
  // },
  {
    prop: "index",
    label: "空间",
    showOverflowTooltip: true,
  },
  {
    prop: "index",
    label: "开工/采买时间",
    showOverflowTooltip: true,
  },
  {
    prop: "claimStartTime",
    label: "兑换时间",
    showOverflowTooltip: true,
    customSlot: "claimStartTime",
  },
  {
    prop: "settleTime",
    label: "确认时间",
    showOverflowTooltip: true,
  },
  {
    prop: "status",
    label: "状态",
    showOverflowTooltip: true,
    customSlot: "status",
  },
]);

function changePage() {}

function backTo() {
  emit("backTo");
}

async function getList() {
  try {
    const res = await couponApi.getCouponList(detailsForm.value);
    tableData.value = res.data;
    console.log(res);
  } catch (e) {}
}

function handleResetQuery() {
  detailsForm.value.code = "";
  detailsForm.value.operationStartTime = undefined;
  detailsForm.value.keywords = "";
  detailsForm.value.pageNum = 1;
  getList();
}

onMounted(() => {
  detailsForm.value.storageId = props.infos?.id;
  detailsForm.value.merchantId = props.infos?.merchantId;
  getList();
});

const loading = ref(false);
</script>
<style scoped lang="scss">
.conetr {
  padding: 10px;
  background-color: #fff;
  position: relative;
  flex: 1;
  margin-left: 10px;
  box-sizing: border-box;
  background-color: #fff;
  padding: 10px 20px;
  .center-board {
    .center-title {
      position: absolute;
      left: 20px;
    }
    .action-bar {
      position: relative;
      box-sizing: border-box;
      padding: 10px 0 15px 0;
      border-bottom: 1px solid var(--el-border-color-extra-light);
      display: flex;
      align-items: center;
      justify-content: flex-end;

      u .delete-btn {
        color: #f56c6c;
      }
    }
  }
  .center-form {
    .form-flex {
      width: 600px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      padding-left: 40px;
    }
    .form-item {
      width: 600px;
    }
    .ms {
      padding-left: 20px;
      color: #999;
    }
  }
}
</style>
